<template>
    <div class="u_select" ref="target">
        <div class="selected-option" :class="show ? 'active' : ''" @click="handleClick">
            <div class="normal">
                <span v-if="selectValue">{{ selectValue }}</span>
                <span v-else>{{ placeholder }}</span>
                <img v-if="!show" class="icon" src="@/assets/images/icon_up.png">
                <img v-else class="icon" src="@/assets/images/icon_down.png">
            </div>
        </div>

        <ul class="options-list" v-show="show">
            <li v-for=" option  in  options " :key="option" class="option" :class="selectValue == option ? 'active' : ''"
                @click="getOption(option)">
                <span>{{ option }}</span>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { getCurrentInstance, onMounted, ref } from "vue";
import { onClickOutside } from "@vueuse/core";
const { proxy } = getCurrentInstance();

const props = defineProps({
    width: {//宽度
        type: [String],
        default: '10.88vh'//235px 
    },
    height: {//高度
        type: [String],
        default: '2.78vh'//60px 
    },
    options: {//选项列表
        type: Array
    },
    placeholder: {
    },
    selectValue: {
        type: [Number, String]
    },//默认展示的option
    bgColor: {//背景颜色
        type: String,
        default: "linear-gradient(105deg, #1755A2 2%, #181F4D 97%)"
    },
    select: {
        type: Boolean,
        default: true
    }
});
const target = ref();// 获取本组件实例
const show = ref(false);// 控制显示下拉框
const targetHeight = ref(40);
onMounted(() => {
    targetHeight.value = target.value.getBoundingClientRect().height;
})
// 选中的值，其中的判断是看父组件是否传递有默认展示的值，如果没有就默认展示option数组的第一个值
const selectValue = ref(props.selectValue != null ? props.selectValue : null);
// 在组件范围之外的点击事件
onClickOutside(target, () => {
    // 在组件范围之外点击，关闭显示下拉框
    show.value = false;
})
const handleClick = () => {
    show.value = !show.value;
    proxy.$emit("click");
}
// 下拉框点击事件
const getOption = (option) => {
    // 将选择的值传递给父组件
    proxy.$emit("change", option);
    // 修改展示的值
    selectValue.value = option;
    // 关闭显示下拉框
    show.value = false;
}

</script>
 
<style lang="scss" scoped>
.u_select {
    display: inline-block;
    border-radius: 4px;
    color: #FFFFFF;
    position: relative;
    border: none;
    font-size: 32px;

    .selected-option {
        width: v-bind(width);
        // height: v-bind(height);

        &.active {
            background-image: url("../assets/images/select_bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .icon {
            width: 26px;
            min-width: 12px;
            height: 100%;
            min-height: 12px;
            margin-left: 10px;
        }

        .normal {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 10px;
            cursor: pointer;
            font-size: 28px;
        }
    }

    .options-list {
        position: absolute;
        left: 0;
        width: 100%;
        padding: 0;
        margin: 0;
        z-index: 200;
        border-radius: 6px;
        transition: all 1s ease-in-out;
        box-sizing: border-box;
        font-size: 28px;
        padding-top: 10px;

        .option {
            padding: 5px 10px;
            cursor: pointer;
            list-style: none;
            position: relative;
            background-image: url("../assets/images/option.png");
            background-size: 100% 100%;
            text-align: center;
            margin-bottom: 2px;
            color: #fff;
        }

        .option:hover {
            color: rgba(207, 231, 250, 1);
        }

        .active {
            // color: rgba(207, 231, 250, 1);
            color: orange;
        }
    }


}
</style>